<template>
<div class="order">
    <div class="header">
        <div class="el">饿了么</div>
        <span>全部</span>
        <span>待消费</span>
        <span>待评价</span>
        <span>退款</span>
    </div>
    <div class="service">
        <div class="tu">
            <img src="https://img0.baidu.com/it/u=3706771975,3427399493&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=480" alt="">
            <div class="name">纯手工饺子(凤城九路店) ></div>
            <span>已送达</span>
        </div>
        <div class="you">
            <span>10减3</span>
            <span>25减10</span>
            <span>50减21</span>
        </div>
        <div class="pic">
            <img src="https://img2.baidu.com/it/u=3765924841,878636458&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334" alt="">
            <img src="https://img1.baidu.com/it/u=4168100681,2213128123&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313" alt="">
            <div class="yuan">￥17.8</div>
            <div class="jian">共2件</div>
        </div>
        <div class="again">
            <span>再来一单</span>
        </div>
    </div>

    <div class="service">
        <div class="tu">
            <img src="https://img0.baidu.com/it/u=861914703,333039063&fm=253&fmt=auto&app=120&f=PNG?w=940&h=614" alt="">
            <div class="name">唐久便利店(海荣名城店) ></div>
            <span>已送达</span>
        </div>
        <div class="you">
            <span>10减3</span>
            <span>25减10</span>
            <span>50减21</span>
        </div>
        <div class="pic">
            <img src="https://img1.baidu.com/it/u=2690187355,1107837437&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
            <img src="https://img0.baidu.com/it/u=3858737772,1223205163&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334" alt="">
            <div class="yuan">￥18.3</div>
            <div class="jian">共2件</div>
        </div>
        <div class="again">
            <span>再来一单</span>
        </div>
    </div>
    <div class="service">
        <div class="tu">
            <img src="https://img2.baidu.com/it/u=2876784018,1356587894&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=496" alt="">
            <div class="name">美益水果(北美店) ></div>
            <span>已送达</span>
        </div>
        <div class="you">
            <span>10减3</span>
            <span>25减10</span>
            <span>50减21</span>
        </div>
        <div class="pic">
            <img src="https://img0.baidu.com/it/u=572353654,3705164052&fm=253&fmt=auto&app=138&f=JPEG?w=249&h=249" alt="">
            <img src="https://img1.baidu.com/it/u=1811883668,3344727908&fm=253&fmt=auto&app=138&f=PNG?w=340&h=255" alt="">
            <div class="yuan">￥28.89</div>
            <div class="jian">共2件</div>
        </div>
        <div class="again">
            <span>再来一单</span>
        </div>
    </div>
</div>
  
</template>

<script>
export default {

}
</script>

<style scoped>
.order{
    background-color: #f5f5f5;
}
.header .el{
font-size: 16px;
color: black;
font-weight: bold;
text-align: center;
padding: 20px 0;
}
.header span{
    margin: 0 20px;
}
.service{
    background-color: white;
    border-radius: 5px;
    height: 215px;
    width: 90%;
    margin-left: 20px;
    margin-top: 10px;
}
.service .tu {
    padding-top: 15px;
    height: 32px;
}
.service .tu img{
    width: 30px;
    float: left;
    margin-left: 10px;
}
.service .tu .name{
    width: 200px;
    font-size: 14px;
    font-weight: bold;
    float: left;
}
.you span{
    border: 1px solid #f00;
    display: inline-block;
    margin-left: 10px;
    border-radius: 5px;
    color: #f00;
}
.pic{
    padding: 15px;
    padding-left: 10px;
   
}
.pic img{
    width: 70px;
    height: 70px;
    padding-right: 10px;
}
.pic .yuan{
  font-size: 20px;
  font-weight: bold;
  float: right;
}
.pic .jian{
  font-size: 15px;
  color: gray;
  float: right;
  margin-top: 30px;
  margin-right:-50px;

}
.again{
    float: right;
    margin-right: 10px;
    margin-bottom: 10px;
}
.again span{
    display: inline-block;
    width: 90px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border: 2px solid skyblue;
    border-radius: 30px;
    color: skyblue;
}
</style>